<template>
  <view class="icon" :class="newIcon" :style="newStyle"></view>
</template>
<script setup>
import { isObject } from '@/utils';
import { View } from '@tarojs/components';
import { computed } from 'vue';
const props = defineProps({
  icon: String,
  size: [Number, String],
  style: [Object, String],
  color: String
});

const appendStyle = (style, appends) => {
  if (!appends) {
    return style;
  }
  if (!style) return appends;
  const arr = appends.split(';');
  if (isObject(style)) {
    arr.forEach(item => {
      if (!item) return;
      let [name, value] = item.split(':');
      if (value) style[name] = value;
    });
    return style;
  }
  if (!style.endsWith(';')) {
    style += ';';
  }
  style += appends;
  return style;
};
const newIcon = computed(() => {
  if (!props.icon) {
    return 'icon-close';
  }
  if (props.icon.startsWith('icon')) return props.icon;
  return `icon-${props.icon}`;
});

const newStyle = computed(() => {
  let _size = props.size;
  if (!isNaN(_size)) {
    _size += 'rpx';
  }
  return appendStyle(props.style, `font-size:${_size};color:${props.color || 'inherit'}`);
});
</script>
